<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col :span="show ? rowObj.T1 : rowObj.F1" :xs="show ? rowObj.T2 : rowObj.F2">
        <workSiteLeft ref="workSiteLeft" :show="show" @showLeft="showLeft" @queryVal="queryVal" />
      </el-col>
      <el-col :span="show ? rowObj.T3 : rowObj.F3" :xs="show ? rowObj.T4 : rowObj.F4">
        <el-form :model="queryParams" ref="queryForm" size="mini" :inline="true" v-show="showSearch">
          <el-button style="margin-right: 6px" size="mini" :icon="show ? 'el-icon-s-fold' : 'el-icon-s-unfold'" circle @click="showLeft(show)"></el-button>
          <!-- <el-form-item label="工地名称" prop="id">
            <el-select v-model="queryParams.id" clearable size="mini" @change="handleDeptId" placeholder="请选择工地名称">
              <el-option v-for="item in constructionList" :key="item.id" :label="item.name" :value="item.id"></el-option>
            </el-select>
          </el-form-item> -->
          <!-- <el-form-item label="职务" prop="zw">
            <el-select v-model="queryParams.zw" clearable size="mini" @change="handleDeptId" placeholder="请选择工地名称">
              <el-option v-for="item in constructionList" :key="item.id" :label="item.name" :value="item.id"></el-option>
            </el-select>
          </el-form-item> -->
          <el-form-item label="姓名" prop="nickName">
            <el-input placeholder="请输入姓名" v-model="queryParams.nickName" clearable></el-input>
          </el-form-item>
          <el-form-item label="手机号" prop="phonenumber">
            <el-input placeholder="请输入手机号" v-model="queryParams.phonenumber" clearable></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery" v-hasPermi="['system:alarmNotification:query']">搜索</el-button>
            <!-- <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button> -->
          </el-form-item>
          <!-- <el-form-item label="是否启用短信通知">
            <el-switch @change="handleSwitch" v-model="isEnable" active-color="#13ce66" inactive-color="#ff4949"></el-switch>
          </el-form-item> -->
        </el-form>
        <el-table border v-loading="loading" :data="cementDataList" size="mini">
          <el-table-column label="姓名" align="center" show-overflow-tooltip min-width="100">
            <template slot-scope="scope"><span>{{ scope.row.nickName || "-" }}</span></template>
          </el-table-column>
          <el-table-column label="职务" align="center" show-overflow-tooltip min-width="100" >
            <template slot-scope="scope"><span>{{ scope.row.zw || "-" }}</span></template>
          </el-table-column>
          <el-table-column label="手机号" align="center" show-overflow-tooltip min-width="100">
            <template slot-scope="scope"><span>{{ scope.row.phonenumber || "-" }}</span></template>
          </el-table-column>
          <el-table-column label="所属单位" align="center" show-overflow-tooltip min-width="100">
            <template slot-scope="scope"><span>{{ scope.row.deptName || "-" }}</span></template>
          </el-table-column>
          <!-- <el-table-column label="混凝土拌合站" align="center" width="225px"> -->
          <el-table-column label="混凝土拌合站" align="center" min-width="120px">
            <template slot-scope="scope">
              <div v-if="scope.row.warnValCon">
                <el-tag type="info" v-if="(scope.row.warnValCon || '').indexOf('1') > -1">初级</el-tag>
                <el-tag type="warning" v-if="(scope.row.warnValCon || '').indexOf('2') > -1">中级</el-tag>
                <el-tag type="danger" v-if="(scope.row.warnValCon || '').indexOf('3') > -1">高级</el-tag>
              </div>
              <span v-else> 暂未预警类型 </span>
            </template>
          </el-table-column>
          <el-table-column label="水稳拌合站" align="center" min-width="120px">
            <template slot-scope="scope">
              <div v-if="scope.row.warnValSw">
                <el-tag type="info" v-if="(scope.row.warnValSw || '').indexOf('1') > -1">初级</el-tag>
                <el-tag type="warning" v-if="(scope.row.warnValSw || '').indexOf('2') > -1">中级</el-tag>
                <el-tag type="danger" v-if="(scope.row.warnValSw || '').indexOf('3') > -1">高级</el-tag>
              </div>
              <span v-else> 暂未预警类型 </span>
            </template>
          </el-table-column>
          <el-table-column label="沥青拌合站" align="center" min-width="120px">
            <template slot-scope="scope">
              <div v-if="scope.row.warnValLq">
                <el-tag type="info" v-if="(scope.row.warnValLq || '').indexOf('1') > -1">初级</el-tag>
                <el-tag type="warning" v-if="(scope.row.warnValLq || '').indexOf('2') > -1">中级</el-tag>
                <el-tag type="danger" v-if="(scope.row.warnValLq || '').indexOf('3') > -1">高级</el-tag>
              </div>
              <span v-else> 暂未预警类型 </span>
            </template>
          </el-table-column>

          <el-table-column label="试验室预警类型" align="center" min-width="120px">
            <template slot-scope="scope">
              <div v-if="scope.row.warnValLab">
                <el-tag type="info" v-if="(scope.row.warnValLab || '').indexOf('1') > -1">沥青</el-tag>
                <el-tag type="warning" v-if="(scope.row.warnValLab || '').indexOf('2') > -1">万能机</el-tag>
                <el-tag type="danger" v-if="(scope.row.warnValLab || '').indexOf('3') > -1">压力机</el-tag>
              </div>
              <span v-else> 暂未类型 </span>
            </template>
          </el-table-column>
          <el-table-column label="张拉压浆预警类型" align="center" min-width="125px">
            <template slot-scope="scope">
              <div v-if="scope.row.warnValZlyj">
                <el-tag type="info" v-if="(scope.row.warnValZlyj || '').indexOf('1') > -1">张拉</el-tag>
                <el-tag type="warning" v-if="(scope.row.warnValZlyj || '').indexOf('2') > -1">压浆</el-tag>
              </div>
              <span v-else> 暂未类型 </span>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center" class-name="small-padding fixed-width" min-width="110" fixed="right">
            <template slot-scope="scope">
              <el-button size="mini" type="text" icon="el-icon-edit" v-hasPermi="['system:alarmNotification:edit']" @click="handleRowEdit(scope.row)">修改预警类型</el-button>
            </template>
          </el-table-column>
        </el-table>

        <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />
      </el-col>
    </el-row>

    <!-- 修改预警类型 -->
    <el-dialog title="修改预警类型" :visible.sync="openEdit" width="600px" append-to-body>
      <el-form ref="editRowForm" :model="editRowForm" label-width="155px">
        <!-- :rules="rules" -->
        <el-form-item label="混凝土拌合站预警类型" prop="warnValCon">
          <el-checkbox-group v-model="editRowForm.warnValCon">
            <el-checkbox label="1">初级预警</el-checkbox>
            <el-checkbox label="2">中级预警 </el-checkbox>
            <el-checkbox label="3">高级预警</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="水稳拌合站预警类型" prop="warnValSw">
          <el-checkbox-group v-model="editRowForm.warnValSw">
            <el-checkbox label="1">初级预警</el-checkbox>
            <el-checkbox label="2">中级预警 </el-checkbox>
            <el-checkbox label="3">高级预警</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="沥青拌合站预警类型" prop="warnValLq">
          <el-checkbox-group v-model="editRowForm.warnValLq">
            <el-checkbox label="1">初级预警</el-checkbox>
            <el-checkbox label="2">中级预警 </el-checkbox>
            <el-checkbox label="3">高级预警</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="试验室预警类型" prop="warnValLab">
          <el-checkbox-group v-model="editRowForm.warnValLab">
            <el-checkbox label="1">沥青</el-checkbox>
            <el-checkbox label="2">万能机</el-checkbox>
            <el-checkbox label="3">压力机</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="张拉压浆预警类型" prop="warnValZlyj">
          <el-checkbox-group v-model="editRowForm.warnValZlyj">
            <el-checkbox label="1">张拉</el-checkbox>
            <el-checkbox label="2">压浆</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button :loading="editLoading" type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  alarmNotificationList,
  // nWarningUsingStatus,
  editNWarningUserMessage,
  // nWarningUsing,
} from "@/api/system/alarmNotification";
import workSiteLeft from "@/views/components/workSiteLeft";

export default {
  name: "alarmNotification", //报警通知管理
  data() {
    return {
      // isEnable: false,
      rowId: "",
      rules: {
        type: [
          {
            type: "array",
            required: true,
            message: "请至少选择一个预警类型",
            trigger: "change",
          },
        ],
      },
      editRowForm: {
        // type: [],
        warnValCon: [],
        warnValSw: [],
        warnValLq: [],
        warnValLab: [],
        warnValZlyj: [],
      },
      editLoading: false,
      openEdit: false,
      show: true,
      rowObj: {
        T1: 3,
        T2: 24,
        T3: 21,
        T4: 24,
        F1: 0,
        F2: 0,
        F3: 24,
        F4: 24,
      },
      constructionList: [], //工地列表
      // 遮罩层
      loading: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 水稳拌合站数据表格数据
      cementDataList: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
    };
  },
  components: {
    workSiteLeft,
  },
  created() {
    // this.getProjectList();
    // this.getNWarningUsingStatus();
    this.getList();
  },

  methods: {
    // getNWarningUsingStatus() {
    //   nWarningUsingStatus().then((res) => {
    //     console.log(res);
    //     this.isEnable = res.data.usingFlag ? true : false;
    //   });
    // },
    /** 查询数据列表 */
    getList() {
      this.loading = true;
      alarmNotificationList(this.queryParams).then((response) => {
        this.cementDataList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    handleDeptId(val) {
      this.$set(this.queryParams, "id", val);
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.$refs.workSiteLeft.resetQuery();
      this.resetForm("queryForm");
      this.$set(this.queryParams, "id", this.constructionList[0].id);
      this.handleQuery();
    },
    showLeft(show) {
      this.show = !show;
    },
    queryVal(val) {
      this.queryParams.id = val.id;
      this.handleQuery();
    },
    handleRowEdit(row) {
      this.editRowForm.warnValCon = (row.warnValCon || "").split(",") || [];
      this.editRowForm.warnValSw = (row.warnValSw || "").split(",") || [];
      this.editRowForm.warnValLq = (row.warnValLq || "").split(",") || [];
      this.editRowForm.warnValLab = (row.warnValLab || "").split(",") || [];
      this.editRowForm.warnValZlyj = (row.warnValZlyj || "").split(",") || [];
      this.rowId = row.id;
      this.openEdit = true;
    },
    submitForm() {
      if (this.rowId) {
        let arr = this.editRowForm.warnValCon.filter((s) => {
          return s && s.trim();
        });
        let arr2 = this.editRowForm.warnValSw.filter((s) => {
          return s && s.trim();
        });
        let arr3 = this.editRowForm.warnValLq.filter((s) => {
          return s && s.trim();
        });
        let arr4 = this.editRowForm.warnValLab.filter((s) => {
          return s && s.trim();
        });
        let arr5 = this.editRowForm.warnValZlyj.filter((s) => {
          return s && s.trim();
        });

        editNWarningUserMessage({
          id: this.rowId,
          warnValCon: arr.toString(),
          warnValSw: arr2.toString(),
          warnValLq: arr3.toString(),
          warnValLab: arr4.toString(),
          warnValZlyj: arr5.toString(),
        })
          .then((res) => {
            this.$message.success("修改成功！");
            this.getList();
            this.cancel();
          })
          .catch(() => {
            this.cancel();
            this.$message.error("修改错误");
          });
      } else {
        this.$message.error("错误");
      }
    },
    cancel() {
      this.rowId = "";
      this.resetForm("editRowForm");
      this.openEdit = false;
    },
    // handleSwitch(val) {
    //   nWarningUsing({ usingFlag: val ? 1 : 0 }).then((res) => {
    //     val
    //       ? this.$message.success("短信通知已启用！")
    //       : this.$message.info("短信通知已关闭！");
    //   });
    // },
  },
};
</script>

<style scoped lang="scss">
.cell .el-tag {
  margin-right: 8px;
}
</style>

